<template>
	<view class="userPage">
		<view class="userBox">
			<view class="user">
				<view class="userImg">
					<image :src="userMsg.avatar"></image>
				</view>
				<view class="userInfo">
					<view class="userName">
						{{userMsg.name}}
					</view>
					<view class="userID">
						编号:{{userMsg.code}}-{{userMsg.mobile}}
					</view>
				</view>
			</view>
		</view>
		<view class="vip vip_">
			<text>会员等级</text>
			<text class="vipName">{{userLevel.name}}</text>
			<text class="vipBtn">库存</text>
		</view>
		
		<view class="couponList">
			<view class="vip" @click="transforMoney(0)">
				<text>现金券</text>
				<text class="vipName">*</text>
				<text class="vipBtn">转账</text>
			</view>
			<view class="vip" @click="transforMoney(1)">
				<text>积分数</text>
				<text class="vipName">*</text>
				<text class="vipBtn">转账</text>
			</view>
			<view class="vip" @click="transforMoney(2)">
				<text>优惠券</text>
				<text class="vipName">*</text>
				<text class="vipBtn">转账</text>
			</view>
		</view>
		
		<view class="userControLBtn">
			<view class="move" @click="move">
				给他转货
			</view>
			<view class="levelUp" >
				<!-- 给他升级 -->
				<picker @change="bindPickerChange" :value="userLevelIndex" :range="userChooseLevel" range-key="name">
					<view class="uni-input">给他升级</view>
				</picker>
			</view>
		</view>
	</view>
</template>

<script>
	import {info, listLevel, changeLevel} from "@/api/user";
	export default {
		data() {
			return {
				uId:0,
				userMsg:{},
				userLevel:{},
				userChooseLevel:[],
				userLevelIndex:0,
				userAccounts:{},
				code:0
			}
		},
		methods: {
			async info(){
				const res= await info(this.uId)
				// console.log(res)
				this.userMsg = res.data
				this.userLevel = res.extra.level
				this.userAccounts= res.extra.accounts
				this.code = res.data.code
				
			},
			async listLevel(){
				const {data:res} = await listLevel()
				// console.log(res)
				this.userChooseLevel = res
				
				
			},
			move(){
				uni.navigateTo({
					url:`/pages/movegoods/movegoods?id=${this.uId}&name=${this.userMsg.name}&code=${this.code}`
				})
			},
			async bindPickerChange(e){
				
				let toUserId = this.uId
				let levelId = this.userChooseLevel[e.detail.value].id
				const res = await changeLevel(toUserId,levelId)
				// console.log(res)
				this.userLevel = res.data
			},
			transforMoney(type){
				uni.navigateTo({
					url:`/pages/transformoney/transformoney?id=${this.uId}&type=${type}`
				})
			}
		},
		onLoad(option) {
			this.uId  = option.id
			this.info()
			this.listLevel()
		}
	}
</script>

<style lang="stylus" scoped>
.userPage
	background-color #EFEFEF
	width 100%
	height 100vh
	.userBox
		width 710rpx
		height 214rpx
		display flex
		align-items center
		background-color #fff
		margin 0 auto
		border-radius 10rpx
		margin-bottom 20rpx
		.user
			width 710rpx
			background-color #fff	
			display flex
			align-items center
			padding 0 40rpx
			.userImg
				width 112rpx
				height 112rpx
				image
					width 112rpx
					height 112rpx
					border-radius:50%
			.userInfo
				margin-left 35rpx
				.userName
					color #6F6F6F
					font-size 32rpx
					font-weight 400
				.userID
					color #A1A1A1
					font-size 28rpx
					font-weight 300
	.vip_,.couponList
		margin-top 20rpx
		border-radius 10rpx
	.vip
		margin 0 auto
		
		width 710rpx
		height 104rpx
		display flex
		padding 0 40rpx
		color #303133
		font-size 28rpx
		font-weight 400
		justify-content space-between
		align-items center
		background-color #fff
		.vipName
			color #A1A1A1
		.vipBtn
			color #A1A1A1
	.userControLBtn
		width 710rpx
		margin 0 auto
		.move,.levelUp
			width 100%
			height 78rpx
			margin-top 20rpx
			display flex
			justify-content center
			align-items center
			border-radius 15px
			color #fff
		.move
			background-color #72A486
		.levelUp
			background-color #F7895E
		
	
			
			
		
</style>
